<?php
/**
 * Yii view index
 *
 * @author <KTD SOFT>
 * @since May 14, 2013 - 10:26:08 PM
 */
?>

<style>
    #ktdfolders{
        float: left;
        width: 20%;
        height: 350px;
        overflow-y: scroll;
    }

    #ktdfolders ul{
        list-style: none;
        margin: 7px;
    }

    #ktdfolders ul li a{
        cursor: pointer;
        color: #666;
        text-decoration: none;
    }

    #ktdfolders ul li a.active{
        color: #2c93dd;
    }

    #ktdfiles{
        float: left;
        height: 350px;
        overflow-y: scroll;
        width: 80%;
    }
    #ktdfiles ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #ktdfiles ul li{
        display: inline-block;
        width: 80px;
        height: 100px;
        text-align: center;        
        overflow: hidden;
        margin: 5px;
        padding: 0;
    }
    #ktdfiles ul li a{
        cursor: pointer;
        color: #333;
        text-decoration: none;
    }

    #ktdfiles ul li a .file_preview{
        display: block;
        width: 70px;
        line-height: 70px;
        margin: 0 auto;
    }
    #ktdfiles ul li a .file_preview img{
        max-width: 80px;
    }
    #ktdfiles ul li a .file_name{
        overflow: hidden;
        width: 100%;
    }

    #ktdfiles ul li a.active{
        text-align: center;
    }
    #ktdfiles ul li a.active .file_preview
    {
        background: #eee;        
    }

    #ktdfiles ul li a.active .file_name
    {
        background: #2c93dd;
        color: #fff;
    }
    #ktdfiles ul li a:hover .file_preview
    {
        background: #eee;        
    }

    #ktdfiles ul li a:hover .file_name
    {
        background: #2c93dd;
        color: #fff;
    }

    .progress { position:relative; width:100%; border: 0;height:3px;border-radius: 0 }
    .bar { background-color: #B4F5B4; width:0%; height:3px;border-radius: 0}
    .percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<!--Image Gallery Box Start-->
<div class="grid">

    <div class="grid-title">
        <div class="pull-left">
            <form id="myForm" action="<?php echo $this->createUrl('files/upload', array('lang' => Yii::app()->language)) ?>" method="post"> 
                <input type='file' name='file' onchange="$(this).submit()"
                       style="border: 0"/>
                <input type="hidden" name="folder" id="upload_folder" value="<?php echo $path . "/"; ?>" />
            </form>
        </div>
        <div class="pull-right">            

            <!--            <a href="#" class="btn" onclick="return rename_file()">
                            <i class="icon-pencil"></i>
            <?php echo Yii::t('files', 'Rename') ?>
                        </a>-->
            <a href="#" class="btn" onclick="return new_folder()">
                <i class="icon-plus"></i>
                <?php echo Yii::t('sub_all', 'New folder') ?>
            </a>
            <a class="btn btn-inverse" onclick="return remove_file()">
                <i class="icon-remove"></i>
                <?php echo Yii::t('sub_all', 'Remove') ?>
            </a>            
        </div>       
        <div class="clear"></div>   
    </div>
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
    <div id="status"></div>
    <div class="grid-content overflow"> 
        <div id="ktdfolders">
            <ul>
                <li>
                    <a onclick="activeFolder($(this))" data="<?php echo $path . "/"; ?>"
                       id='root_folder' class="link_folder">
                        <i class="icon icon-folder-open"></i> root/
                    </a>
                    <div class="folder_child">
                        <?php $this->renderPartial('folders', array('files' => $files)); ?>
                    </div>
                </li>
            </ul>

        </div>
        <div id="ktdfiles">
            <?php $this->renderPartial('files', array('files' => $files)); ?>
        </div>
        <div class="clear"></div>
    </div>
    <!--Image Gallery Box END-->    
</div>

<script src="<?php echo $this->asset ?>/js/tiny_mce/tiny_mce_popup.js"></script>
<script src="<?php echo $this->asset ?>/js/jquery.form.js"></script>
<script>
                        ACTIVE_ID = '';
                        ACTIVE_PATH = '';
                        LAST_FOLDER_EL = $('#root_folder');

                        $(function () {

                            var bar = $('.bar');
                            var percent = $('.percent');
                            var status = $('#status');

                            $('#myForm').ajaxForm({
                                dataType: 'json',
                                beforeSend: function () {
                                    status.empty();
                                    var percentVal = '0%';
                                    bar.width(percentVal)
                                    percent.html(percentVal);
                                },
                                uploadProgress: function (event, position, total, percentComplete) {
                                    var percentVal = percentComplete + '%';
                                    bar.width(percentVal)
                                    percent.html(percentVal);
                                    //console.log(percentVal, position, total);
                                },
                                success: function (data) {
                                    var percentVal = '100%';
                                    bar.width(percentVal)
                                    percent.html(percentVal);
                                    alert(data.mess);
                                },
                                complete: function (xhr) {
                                    activeFolder(LAST_FOLDER_EL);
                                }
                            });

                        });

                        var FileBrowserDialogue = {
                            init: function () {
                                // Here goes your code for setting your custom things onLoad.
                            },
                            mySubmit: function (URL) {
                                var win = tinyMCEPopup.getWindowArg('window');

                                // pass selected file path to TinyMCE
                                win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;

                                // are we an image browser?
                                if (typeof (win.ImageDialog) != 'undefined') {
                                    // update image dimensions
                                    if (win.ImageDialog.getImageData) {
                                        win.ImageDialog.getImageData();
                                    }
                                    // update preview if necessary
                                    if (win.ImageDialog.showPreviewImage) {
                                        win.ImageDialog.showPreviewImage(URL);
                                    }
                                }

                                // close popup window
                                tinyMCEPopup.close();
                            }
                        }

                        tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);

                        function activeFile(el)
                        {
                            $(".file_link").each(function () {
                                $(this).removeClass('active');
                            });

                            el.addClass('active');
                            BASE_URL = '<?php echo $base_url ?>';
                            ACTIVE_ID = el.parent().attr('id');
                            ACTIVE_PATH = el.attr('data');

                            beautyUrl = BASE_URL + '/' + el.attr('data');

<?php if (isset($_GET['type']) && $_GET['type'] == 'tinymce'): ?>
                                FileBrowserDialogue.mySubmit(beautyUrl); // pass selected file path to TinyMCE 
<?php else: ?>
                                id = "#" + getParameterByName('field'); // ID của INPUT cần chèn
                                dialog = "#" + getParameterByName('dialog'); // ID của Dialog chứa iframe
                                prvid = "#prv_" + getParameterByName('field'); // ID của ảnh cần chèn
                                window.parent.$(id).attr('value', beautyUrl);
                                window.parent.$(prvid).attr('src', beautyUrl);
                                window.parent.$(prvid).attr('data-glisse-big', beautyUrl);
                                window.parent.$(dialog).modal('hide');
                                window.parent.document.getElementById(prvid).scrollIntoView();
                                window.parent.$(id).focus();
<?php endif; ?>
                        }

                        function getParameterByName(name)
                        {
                            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                            var regexS = "[\\?&]" + name + "=([^&#]*)";
                            var regex = new RegExp(regexS);
                            var results = regex.exec(window.location.search);
                            if (results == null)
                                return "";
                            else
                                return decodeURIComponent(results[1].replace(/\+/g, " "));
                        }
                        function activeFolder(el)
                        {
                            LAST_FOLDER_EL = el;
                            $(".folder_link").each(function () {
                                $(this).removeClass('active');
                            });

                            el.addClass('active');
                            $('#upload_folder').val(LAST_FOLDER_EL.attr('data'));

                            URL = '<?php echo $this->createUrl('files/searchDir', array('lang' => Yii::app()->language)) ?>';

                            // Lấy thư mục con
                            $.post(URL, {path: el.attr('data'), filter: 'folder'}, function (data) {
                                el.parent('li').children('.folder_child').html(data);
                            });

                            // Lấy file trong thư mục
                            $.post(URL, {path: el.attr('data')}, function (data) {
                                $('#ktdfiles').html(data);
                            });

                            ACTIVE_ID = el.parent().parent().attr('id');
                            ACTIVE_PATH = el.attr('data');
                        }

                        function remove_file()
                        {
                            if (!confirm('Có phải bạn muốn xóa phần tử này?'))
                                return false;

                            URL = '<?php echo $this->createUrl('files/remove', array('lang' => Yii::app()->language)) ?>';
                            $.post(URL, {path: ACTIVE_PATH}, function () {
                                $('#' + ACTIVE_ID).remove();
                            });

                            return false;
                        }

                        function rename_file()
                        {
                            var newname = prompt("Nhập tên mới", "TenMoi");
                            alert(LAST_FOLDER_EL.attr('data'));

                            URL = '<?php echo $this->createUrl('files/rename', array('lang' => Yii::app()->language)) ?>';
                            $.post(URL, {path: ACTIVE_PATH, newname: newname}, function () {
                                activeFolder(LAST_FOLDER_EL);
                            });

                            return false;
                        }

                        function new_folder()
                        {
                            var name = prompt("Nhập tên", "ThuMucMoi");

                            URL = '<?php echo $this->createUrl('files/newFolder', array('lang' => Yii::app()->language)) ?>';
                            $.post(URL, {folder: LAST_FOLDER_EL.attr('data'), name: name}, function () {
                                activeFolder(LAST_FOLDER_EL);
                            });

                            return false;
                        }
</script>